<div class="container">
  <!-- JACKPOT -->
  <div class="container-jackpot"
  *ngIf="activityIndex<3"
    [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/final-jackpot-bg.png)'">
    <img class="container-jackpot__icon" [src]="deployUrl+'assets/img/end-year/common/question-mark.png'" alt="详情" (click)="closeShow(true)">
    <div class="container-jackpot__text">{{potBaseValues}}魅力</div>
  </div>
  <!-- HEADER -->
  <div class="container-header bg_common">
    <!-- 标题 -->
    <div class="top_title">
      <img class="container-header__title" src="{{deployUrl}}assets/img/end-year/nvshen/round-title-6.png" alt="决赛规则">
    </div>
    <!-- 规则 -->
    <div class="brief animation" style="margin-top: -0.6rem;margin-bottom:-0.6rem;" [ngClass]="{up:!flag,down:flag}">
      <p>
        1、比赛时间为12月19日00:00:00~23:59:59，仅限成功晋级的16名主播参与；
      </p>
      <p>
        2、比赛开始后榜单
        <strong>从0统计荣耀值</strong>，主播需在开播状态下在本直播间收礼才可获得荣耀值,1钻石=1荣耀值，收到宝箱礼物按照宝箱开出的礼物实际价格统计，收到神秘商店产出的礼物按1钻石=1.5荣耀值统计;
      </p>
      <p>
        3、榜单将在以下2个时间点分别结算一次榜单：19:59:59第1次结算榜单，淘汰末尾6名主播；21:59:59第2次结算榜单，淘汰末尾5名主播，剩余5名主播将开启占领模式确定最终5强排名；
      </p>
      <p>
        4、占领顺序为：冠军→亚军→季军→TOP4→TOP5，首先抢占「冠军」最后抢占「TOP5」，抢占成功后即视为最终名次；
      </p>
      <p>
        5、当占领开始后，榜单第一名视为正在占领名次，占领时长满30分钟视为占领成功，占领途中被挤出第一名又重回第一名，占领时长在原来基础上往上增加，每次切换名次占领时长都重新统计；
      </p>
      <p>
        6、若活动时间结束5强占领结果还未全部产生，则按时间结束那一刻的排名确定剩余未占领的名次归属者；
      </p>
      <p>
        7、决赛结束后将会发放决赛奖励，前10名获得活动大奖。
      </p>
    </div>
    <div class="accordion" (click)="flag=!flag">
      <img src="{{deployUrl}}assets/img/end-year/common/accordion-close.png" alt="" *ngIf="flag">
      <img src="{{deployUrl}}assets/img/end-year/common/accordion-open.png" alt="" *ngIf="!flag">
    </div>
  </div>
  <!-- MAIN -->
  <div class="bg_common" style="margin-bottom: 1.5rem;">
    <div class="container-main__countdown" *ngIf="activityIndex<3">
      <img src="{{deployUrl}}assets/img/end-year/nvshen/endtitle{{activityIndex}}.png" alt="" class="countdown-title">
      <div class="countdown-main">
        <div style="margin-left: 0;">
          <p>{{hoursLeftNum}}</p>
        </div>
        <div>
          <p>{{hoursRightNum}}</p>
        </div>
        <span>时</span>
        <div>
          <p>{{fenLeftNum}}</p>
        </div>
        <div>
          <p>{{fenRightNum}}</p>
        </div>
        <span>分</span>
        <div>
          <p>{{miaoLeftNum}}</p>
        </div>
        <div>
          <p>{{miaoRightNum}}</p>
        </div>
        <span style="margin-right: 0;">秒</span>
      </div>
      <div class="countdown-footer" *ngIf="activityIndex===0">本次结算淘汰第11-16名</div>
      <div class="countdown-footer" *ngIf="activityIndex===1">本次结算淘汰第6-10名</div>
    </div>
    <!-- OTHERS -->
    <div class="container-main__others" *ngIf="activityIndex<=1">
      <div class="others-header"
        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-header-bg_jue.png)'">
        <div class="index">排名</div>
        <div class="detail">主播信息</div>
        <div class="value">荣耀值</div>
      </div>
      <div class="others-main" *ngIf="othersList.length">
        <!-- item -->
        <div *ngFor="let anchor of othersList; let i=index">
          <img src="{{deployUrl}}assets/img/end-year/common/area-1.png" alt="" *ngIf="i===0">
          <img src="{{deployUrl}}assets/img/end-year/common/area-2.png" alt=""
            *ngIf="(i===10&&activityIndex==0)||(i===5&&activityIndex==1)">
          <img src="{{deployUrl}}assets/img/end-year/common/area-3.png" alt="" *ngIf="outIndex===i&&outIndex!=-1">
          <div class="others-main__item" [ngClass]="{top_bg1: i===0,top_bg2: i===1,top_bg3: i===2}">
            <div class="index">
              <span *ngIf="i>2">
                {{anchor.isWeedOut?'已淘汰':i+1}}
              </span>
              <img [src]="deployUrl+'assets/img/end-year/renqi/others-main-item-rank-'+(i+1)+'.png'" *ngIf="i<3"
                style="width: 0.42rem;height:0.48rem;">
            </div>
            <div class="detail">
              <div class="detail-avatar" (click)="gotoRoom(anchor,'anchor')">
                <img [src]="anchor.avatarUrl | headImg" [alt]="anchor.nickname">
                <img class="live" src="{{deployUrl}}assets/img/end-year/common/live{{isAndroid?'.webp':'.png'}}"
                  alt="直播中" *ngIf="anchor.liveStatus">
              </div>
              <div class="detail-info">
                <div class="detail-info--name" (click)="gotoRoom(anchor,'anchor')">{{anchor.nickname}}</div>
                <div class="detail-info--gap" *ngIf="!anchor.isWeedOut">
                  <span *ngIf="i!=0">
                    {{anchor.rankDesc}}
                  </span>
                  <img *ngIf="i===0" src="{{deployUrl}}assets/img/end-year/common/top3-mvp.png" alt="第一名">
                </div>
              </div>
            </div>
            <div class="value">{{anchor.score}}</div>
          </div>
        </div>
        <!-- spinner -->
        <div class="getmore" *ngIf="othersList.length&&!onRefrash">
          <span>没有更多了</span>
        </div>
      </div>
      <div *ngIf="!othersList.length" class="not_li">
        <p>暂无数据</p>
      </div>
    </div>
    <div class="container-main__final" *ngIf="activityIndex==2">
      <div class="guanjun" *ngIf="lastRankAnchor.length<5">
        <div class="toptitle">
          <img src="{{deployUrl}}assets/img/end-year/nvshen/guan_title{{lastRankAnchor.length}}.png" alt="">
        </div>
        <div class="bg_top"
          [ngStyle]="{'background':'url('+deployUrl+'assets/img/end-year/nvshen/guan_bg'+lastRankAnchor.length+'.png)center center/100%'}">
          <div class="topavatar">
            <div class="avatar">
              <img [src]="othersList[0]?.avatarUrl | headImg" alt="">
              <img class="live" src="{{deployUrl}}assets/img/end-year/common/live{{isAndroid?'.webp':'.png'}}" alt="直播中"
                *ngIf="othersList[0]?.liveStatus">
            </div>
            <img src="{{deployUrl}}assets/img/end-year/nvshen/guan_bg_{{lastRankAnchor.length}}.png" alt="" class="bg_s"
              (click)="gotoRoom(othersList[0],'anchor')">
          </div>
        </div>
        <p class="guanjundes"><strong>{{othersList[0]?.nickname}}</strong><strong>主播</strong> 已占位{{othersList[0]?.countdown | countDown}}
        </p>
      </div>

      <div class="ranks">
        <div class="rankanchor" *ngFor="let anchor of anchorRank; let i=index"
          [ngStyle]="{'background':'url('+deployUrl+'assets/img/end-year/nvshen/rank_bg_'+ (anchor.uid? i :('not'+ i)) +'.png)center center/100%'}">
          <div *ngIf="anchor.uid" (click)="gotoRoom(anchor,'anchor')">
            <img [src]="anchor.avatarUrl | headImg" alt="">
            <img class="live" src="{{deployUrl}}assets/img/end-year/common/live{{isAndroid?'.webp':'.png'}}" alt="直播中"
              *ngIf="anchor.liveStatus">
          </div>
        </div>
      </div>

      <div class="others-header"
        [style.backgroundImage]="'url('+deployUrl+'assets/img/end-year/common/others-header-bg_jue.png)'"
        style="margin-bottom: 0.08rem;">
        <div class="index">排名</div>
        <div class="detail">主播信息</div>
        <div class="value">荣耀值</div>
        <div class="help">占位时长</div>
      </div>
      <div class="others-main" *ngIf="othersList.length">
        <!-- item -->
        <div *ngFor="let anchor of othersList; let i=index">
          <div class="others-main__item" [ngClass]="{top_bg1: i===0,top_bg2: i===1,top_bg3: i===2}">
            <div class="index">
              <span *ngIf="i>2">
                {{i+1}}
              </span>
              <img [src]="deployUrl+'assets/img/end-year/renqi/others-main-item-rank-'+(i+1)+'.png'" *ngIf="i<3"
                style="width: 0.42rem;height:0.48rem;">
            </div>
            <div class="detail">
              <div class="detail-avatar" (click)="gotoRoom(anchor,'anchor')">
                <img [src]="anchor.avatarUrl | headImg" [alt]="anchor.nickname">
                <img class="live" src="{{deployUrl}}assets/img/end-year/common/live{{isAndroid?'.webp':'.png'}}"
                  alt="直播中" *ngIf="anchor.liveStatus">
              </div>
              <div class="detail-info">
                <div class="detail-info--name" (click)="gotoRoom(anchor,'anchor')">{{anchor.nickname}}</div>
                <div class="detail-info--gap" *ngIf="!anchor.isWeedOut">
                  <span *ngIf="i!=0">
                    {{anchor.rankDesc}}
                  </span>
                  <img *ngIf="i===0" src="{{deployUrl}}assets/img/end-year/common/top3-mvp.png" alt="第一名">
                </div>
              </div>
            </div>
            <div class="value">{{anchor.score}}</div>
            <div class="help">
              <div>
                <img src="{{deployUrl}}assets/img/end-year/nvshen/times.png" alt="">
                <span>{{anchor.countdown | countDown}}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- spinner -->
        <div class="getmore" *ngIf="othersList.length&&!onRefrash">
          <span>没有更多了</span>
        </div>
      </div>
    </div>
    <div class="container-main__over" *ngIf="activityIndex==3">
      <div class="guanjun" *ngFor="let item of top3List;let i=index">
        <div class="toptitle">
          <img src="{{deployUrl}}assets/img/end-year/nvshen/niandu_title{{i}}.png" alt="">
        </div>
        <div class="bg_top" [ngStyle]="{'background':'url('+deployUrl+'assets/img/end-year/nvshen/guan_bg'+i+'.png)center center/100%'}">
          <div class="topavatar">
           <div class="avatar">
            <img [src]="item.avatarUrl | headImg" alt="">
            <img class="live" src="{{deployUrl}}assets/img/end-year/common/live{{isAndroid?'.webp':'.png'}}" alt="直播中" *ngIf="item.liveStatus">
           </div>
           <img src="{{deployUrl}}assets/img/end-year/nvshen/guan_bg_{{i}}.png" alt="" class="bg_s" (click)="gotoRoom(item,'anchor')">
          </div>
        </div>
        <p class="guanjundes_nick">
          <span>{{item.nickname}}</span>
        </p>
        <p class="guanjundes">获得<strong>{{item.score}}</strong>魅力</p>
      </div>
      <ul class="end_rank">
        <li *ngFor="let item of endothersList;let i=index"
          [ngStyle]="{'background':'url('+deployUrl+'assets/img/end-year/nvshen/other_anchor_bg'+item.rank+'.png)center center/100%'}" [ngClass]="{'top_7': i>2}">
          <div>
            <div>
              <img [src]="item.avatarUrl | headImg" alt="">
              <img class="live" src="{{deployUrl}}assets/img/end-year/common/live{{isAndroid?'.webp':'.png'}}" alt="直播中"
                *ngIf="item.liveStatus">
            </div>
            <img src="{{deployUrl}}assets/img/end-year/nvshen/other_anchor_head_bg{{item.rank}}.png" alt="">
          </div>
          <p class="nick">{{item.nickname}}</p>
          <p class="gua" *ngIf="i<3">
            获得<strong>{{item.score}}</strong>魅力
          </p>
        </li>
      </ul>
    </div>
    <div class="container-footer">
      <p *ngIf="!isAndroid && !isPC">声明：本活动与Apple Inc.无关</p>
      <p>请用户注意，适度娱乐，理性消费</p>
    </div>
  </div>
  <!-- 直播间主播 -->
  <div class="myself" *ngIf="activityIndex<2">
    <div class="index" *ngIf="!currentAnchorInfo.rank">-</div>
    <div class="index" *ngIf="currentAnchorInfo.rank">
      <span *ngIf="currentAnchorInfo.rank>3">
        {{currentAnchorInfo.rank}}
      </span>
      <img [src]="deployUrl+'assets/img/end-year/renqi/others-main-item-rank-'+(currentAnchorInfo.rank)+'.png'"
        *ngIf="currentAnchorInfo.rank<=3" style="width: 0.42rem;height:0.48rem;">
    </div>
    <div class="detail">
      <img class="detail-avatar" [src]="currentAnchorInfo.avatarUrl" alt="">
      <div class="detail-info">
        <div class="detail-info--name"> {{currentAnchorInfo.nickname}}</div>
        <div class="detail-info--gap" *ngIf="!currentAnchorInfo.weedOut">
          <span *ngIf="currentAnchorInfo.rank!==1">
            {{currentAnchorInfo.rankDesc}}
          </span>
          <img *ngIf="currentAnchorInfo.rank===1" src="{{deployUrl}}assets/img/end-year/common/top3-mvp.png" alt="第一名">
        </div>
      </div>
    </div>
    <div class="value">{{currentAnchorInfo.weedOut?'已淘汰':currentAnchorInfo.score}}</div>
  </div>

  <!-- 直播间主播 -->
  <!-- <div class="myself1" *ngIf="activityIndex===2">
    <div class="index" *ngIf="!currentAnchorInfo.rank">-</div>
    <div class="index" *ngIf="currentAnchorInfo.rank">
      <span *ngIf="currentAnchorInfo.rank>3">
        {{currentAnchorInfo.rank}}
      </span>
      <img [src]="deployUrl+'assets/img/end-year/renqi/others-main-item-rank-'+(currentAnchorInfo.rank)+'.png'"
        *ngIf="currentAnchorInfo.rank<=3" style="width: 0.42rem;height:0.48rem;">
    </div>
    <div class="detail">
      <img class="detail-avatar" [src]="currentAnchorInfo.avatarUrl" alt="">
      <div class="detail-info">
        <div class="detail-info--name"> {{currentAnchorInfo.nickname}}</div>
        <div class="detail-info--gap" *ngIf="!currentAnchorInfo.weedOut">
          <span *ngIf="currentAnchorInfo.rank!==1">
            {{currentAnchorInfo.rankDesc}}
          </span>
          <img *ngIf="currentAnchorInfo.rank===1" src="{{deployUrl}}assets/img/end-year/common/top3-mvp.png" alt="第一名">
        </div>
      </div>
    </div>
    <div class="value">{{currentAnchorInfo.score}}</div>
    <div class="help">
      <div>
        <img src="{{deployUrl}}assets/img/end-year/nvshen/times.png" alt="">
        <span>{{currentAnchorInfo.countdown | countDown}}</span>
      </div>
    </div>
  </div> -->


</div>
<!-- 刷新 -->
<div class="loader" *ngIf="onRefrash">
  <div class="loader-inner">
    <div class="loader-line-wrap">
      <div class="loader-line"></div>
    </div>
    <div class="loader-line-wrap">
      <div class="loader-line"></div>
    </div>
    <div class="loader-line-wrap">
      <div class="loader-line"></div>
    </div>
    <div class="loader-line-wrap">
      <div class="loader-line"></div>
    </div>
    <div class="loader-line-wrap">
      <div class="loader-line"></div>
    </div>
  </div>
</div>
<!-- 弹窗 -->
<div class="dialog" *ngIf="isDialog" (click)="closeShow(false)">
  <div class="contain alert-anmation" (click)="$event.stopPropagation();">
    <div class="close" (click)="closeShow(false)">
      <img src="{{deployUrl}}assets/img/end-year/nvshen/close.png" alt="">
    </div>
    <p>1、奖池组成部分主要如下：</p>
    <p><strong>1）基础12000000魅力 </strong></p>
    <p><strong>2）直通赛冠军奖池若无归属，直接加到决赛奖池</strong></p>
    <p>
      2、决赛奖池的全部魅力将在活动结束后瓜分给前5名主播</p>
  </div>
</div>
